<template>
  <div class="default-main">
    <div class="growth-chart" v-if="!overview.main">
      <el-row :gutter="20">
        <el-col class="lg-mb-20" :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" header="设备总量">
            <div class="count-chart" :ref="chartRefs.set"></div>
          </el-card>
        </el-col>
        <el-col class="lg-mb-20" :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" header="设备">
            <div class="normal-chart" :ref="chartRefs.set"></div>
          </el-card>
        </el-col>
        <el-col class="lg-mb-20" :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" header="设备">
            <div class="warn-chart" :ref="chartRefs.set"></div>
          </el-card>
        </el-col>
        <el-col class="lg-mb-20" :xs="24" :sm="12" :md="6" :lg="6">
          <el-card shadow="hover" header="设备">
            <div class="faul-chart" :ref="chartRefs.set"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 最新接入企业/设备 -->
    <div class="overViewList">
      <el-row :gutter="20">
        <!-- 企业 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="12" class="lg-mb-20">
          <el-card class="new-device-card" shadow="hover" header="最新接入企业">
            <div
              class="new-device-growth"
              v-if="overview.firstPageBusiness.length > 0"
            >
              <el-scrollbar>
                <div
                  v-for="item in overview.firstPageBusiness"
                  :key="item.id"
                  class="new-device-item"
                  @click="newDeviceInfo(item)"
                >
                  <img
                    class="new-device-avatar"
                    src="@/assets/mSystem.png"
                    alt="设备码"
                  />
                  <div class="new-device-base">
                    <!-- 设备编码 -->
                    <div class="new-device-name">{{ item.name }}</div>
                    <!-- 接入地址 -->
                    <div class="new-device-time">{{ item.addr }}</div>
                  </div>
                  <!-- iconfont -->
                  <el-icon color="#8595F4" class="new-device-arrow">
                    <ArrowRightBold />
                  </el-icon>
                </div>
              </el-scrollbar>
            </div>
            <div v-else>
              <el-empty description="暂无数据" />
            </div>
          </el-card>
        </el-col>
        <!-- 设备 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="12" class="lg-mb-20">
          <el-card class="new-device-card" shadow="hover" header="最新接入设备">
            <div
              class="new-device-growth"
              v-if="overview.firstPageDevices.length > 0"
            >
              <el-scrollbar>
                <div
                  v-for="item in overview.firstPageDevices"
                  :key="item.id"
                  class="new-device-item"
                >
                  <img
                    class="new-device-avatar"
                    src="@/assets/monitor.png"
                    alt="设备码"
                  />
                  <div class="new-device-base">
                    <!-- 设备编号 -->
                    <div class="new-device-name">{{ item.code }}</div>
                    <!-- 设备地址 -->
                    <div class="new-device-time">{{ item.addr }}</div>
                  </div>
                  <!-- iconfont -->
                  <!-- <el-icon color="#8595F4" class="new-device-arrow">
                    <ArrowRightBold />
                  </el-icon> -->
                </div>
              </el-scrollbar>
            </div>
            <div v-else>
              <el-empty description="暂无数据" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  toRaw,
  onBeforeUnmount,
  reactive,
  nextTick,
  onActivated,
  onMounted,
  onBeforeMount,
  onUnmounted,
  watch,
} from "vue";
import { useTemplateRefsList } from "@vueuse/core";
import { useNavTabs } from "@/store/navTabs";
import { useAdminInfo } from "@/store/adminInfo";
import * as echarts from "echarts/core";
import "element-plus/theme-chalk/display.css";
import { WORKING_TIME } from "@/store/constant/cacheKey";
import { useOverView } from "@/store/backend/EquipM/overView";
import { useBusiness } from "@/store/backend/BusinessM/info";
import { useRouter } from "vue-router";
import {
  TooltipComponent,
  TooltipComponentOption,
  LegendComponent,
  LegendComponentOption,
} from "echarts/components";
import { PieChart, PieSeriesOption } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);
type EChartsOption = echarts.ComposeOption<
  TooltipComponentOption | LegendComponentOption | PieSeriesOption
>;

const chartRefs = useTemplateRefsList<HTMLDivElement>();
const adminInfo = useAdminInfo();
const navTabs = useNavTabs();
const overview = useOverView();
const business = useBusiness();
const router = useRouter();

type Pie = {
  value: number;
  name: string;
};
type Device = {
  id: number;
  name: string;
  createTime: string;
  activationTime: string;
};
type Enterprise = {
  id: number;
  name: string;
  createTime: string;
};

const stateCharts: { charts: any[] } = { charts: [] }; //初始化的echarts数据
//初始化饼图数组
const initPieChart = () => {
  props.pieData.forEach((val: any, index: any) => {
    const myChart = echarts.init(chartRefs.value[index] as HTMLElement);
    const option = {
      color:
        val.name === "总量"
          ? ["#5470c6"]
          : val.name === "正常"
          ? ["#5470c6", "#91cc75"]
          : val.name === "告警"
          ? ["#5470c6", "#fac858"]
          : ["#5470c6", "#ee6666"],
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            // formatter: `{b}:{c}: ({d}%)`,
            formatter: function (params: any) {
              if (params.percent) {
                return (
                  params.name +
                  ":" +
                  params.value +
                  "(" +
                  params.percent +
                  "%" +
                  ")"
                );
              } else {
                return params.name + ":" + params.value + "(" + 0 + "%" + ")";
              }
            },
            position: "inside",
            fontWeight: "normal",
            fontSize: 12,
          },
          itemStyle: {
            // normal: {}
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data:
            index === 0
              ? [props.pieData[0]]
              : [props.pieData[0], props.pieData[index]],
        },
      ],
    };
    myChart.setOption(option);
    stateCharts.charts.push(myChart);
  });
};
const echartsResize = () => {
  nextTick(() => {
    for (const key in stateCharts.charts) {
      stateCharts.charts[key].resize();
    }
  });
};

onActivated(() => {});
onMounted(async () => {
  initChart();
  window.addEventListener("resize", echartsResize);
  console.log("头部", overview.main);
});
const initChart = () => {
  initPieChart();
};
interface Props {
  pieData: any;
}
const props = withDefaults(defineProps<Props>(), {
  pieData: () => {
    return {};
  },
});
//最新接入设备点击跳转值企业详情
const newDeviceInfo = (row: any) => {
  business.$patch((state) => {
    state.loading = true;
    state.query = row.id;
    state.item = row;
  });
  //!待跳转到实时设备详情 通常是获取拿到id获取数据后跳转
  router.push({
    path: "/admin/BusinessM/detail",
    query: { institution: row.id },
  });
};
onUnmounted(() => {});
onBeforeUnmount(() => {
  if (stateCharts.charts.length > 0) {
    stateCharts.charts[0].dispose();
    stateCharts.charts.length = 0;
  }
  window.removeEventListener("resize", echartsResize);
});
watch(
  () => navTabs.state.tabFullScreen,
  () => {
    echartsResize();
  }
);
</script>
<style lang="scss" scoped>
.default-main {
  margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
}
.growth-chart {
  margin-bottom: 20px;
  .count-chart,
  .normal-chart,
  .warn-chart,
  .faul-chart {
    height: 260px;
  }
}

.overViewList {
  .new-device-card :deep(.el-card__body) {
    padding: 0;

    .new-device-growth {
      height: 300px;

      .new-device-item {
        display: flex;
        align-items: center;
        padding: 20px;
        margin: 10px 15px;
        box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
        background-color: var(--ba-bg-color-overlay);
        cursor: pointer;

        &:hover {
          box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
            0px 8px 20px rgba(0, 0, 0, 0.08);
        }

        .new-device-avatar {
          height: 48px;
          width: 48px;
          border-radius: 50%;
        }

        .new-device-base {
          margin-left: 10px;
          color: #2c3f5d;

          .new-device-name {
            font-size: 15px;
          }

          .new-device-time {
            font-size: 13px;
          }
        }

        .new-device-arrow {
          margin-left: auto;
        }
      }
    }
  }
}

@media screen and (max-width: 425px) {
  .welcome-img {
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  .lg-mb-20 {
    margin-bottom: 20px;
  }
}

.div {
  color: #ee6666;
}
.new-device-noting {
}
</style>
